<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>刷题帮系统</title>
  <link rel="icon" href="image/网页图标.png" type="image/x-icon">

  <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
  <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
  <link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
  <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>

  <style>
    :root {
      /* COLORS */
      --white: #e9e9e9;
      --gray: #333;
      --blue: #0367a6;
      --lightblue: #008997;

      /* RADII */
      --button-radius: 0.7rem;

      /* SIZES */
      --max-width: 758px;
      --max-height: 420px;

      font-size: 16px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
        Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    }

    #app {
      align-items: center;
      background-color: var(--white);
      background: url("https://clubimg.club.vmall.com/data/attachment/forum/201811/26/173003zem55hgrdzovzr07.jpg");
      background-attachment: fixed;
      background-position: 0 -200px;
      background-repeat: no-repeat;
      background-size: cover;
      display: grid;
      height: 100vh;
      place-items: center;
    }

    .form__title {
      font-weight: 300;
      margin: 0;
      margin-bottom: 1.25rem;
    }

    .link {
      color: var(--gray);
      font-size: 0.9rem;
      margin: 1.5rem 0;
      text-decoration: none;
    }

    .container {
      background-color: var(--white);
      border-radius: var(--button-radius);
      box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25),
        0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
      height: 500px;
      max-width: var(--max-width);
      overflow: hidden;
      position: relative;
      top: -10%;
      width: 100%;
    }

    .container__form {
      height: 100%;
      position: absolute;
      top: 0;
      transition: all 0.6s ease-in-out;
    }

    .container--signin {
      left: 0;
      width: 50%;
      z-index: 2;
    }

    .container.right-panel-active .container--signin {
      transform: translateX(100%);
    }

    .container--signup {
      left: 0;
      opacity: 0;
      width: 50%;
      z-index: 1;
    }

    .container.right-panel-active .container--signup {
      animation: show 0.6s;
      opacity: 1;
      transform: translateX(100%);
      z-index: 5;
    }

    .container__overlay {
      height: 100%;
      left: 50%;
      overflow: hidden;
      position: absolute;
      top: 0;
      transition: transform 0.6s ease-in-out;
      width: 50%;
      z-index: 100;
    }

    .container.right-panel-active .container__overlay {
      transform: translateX(-100%);
    }

    .overlay {
      background-color: var(--lightblue);
      background: url("https://img.keaitupian.cn/newupload/10/1667208204593588.jpg");
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      height: 100%;
      left: -100%;
      position: relative;
      transform: translateX(0);
      transition: transform 0.6s ease-in-out;
      width: 200%;
    }

    .container.right-panel-active .overlay {
      transform: translateX(50%);
    }

    .overlay__panel {
      align-items: center;
      display: flex;
      flex-direction: column;
      height: 100%;
      justify-content: center;
      position: absolute;
      text-align: center;
      top: 0;
      transform: translateX(0);
      transition: transform 0.6s ease-in-out;
      width: 50%;
    }

    .overlay--left {
      transform: translateX(-20%);
    }

    .container.right-panel-active .overlay--left {
      transform: translateX(0);
    }

    .overlay--right {
      right: 0;
      transform: translateX(0);
    }

    .container.right-panel-active .overlay--right {
      transform: translateX(20%);
    }

    .btn {
      background-color: var(--blue);
      background-image: linear-gradient(90deg, var(--blue) 0%, var(--lightblue) 74%);
      border-radius: 20px;
      border: 1px solid var(--blue);
      color: var(--white);
      cursor: pointer;
      font-size: 0.8rem;
      font-weight: bold;
      letter-spacing: 0.1rem;
      padding: 0.9rem 4rem;
      text-transform: uppercase;
      transition: transform 80ms ease-in;
    }

    .form>.btn {
      margin-top: 1.5rem;
    }

    .btn:active {
      transform: scale(0.95);
    }

    .btn:focus {
      outline: none;
    }

    .form {
      background-color: var(--white);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      padding: 0 3rem;
      height: 100%;
      text-align: center;
    }

    .input {
      background-color: #fff;
      border: none;
      padding: 0.9rem 0.9rem;
      margin: 0.5rem 0;
      width: 100%;
    }
    .input1 {
      background-color: #fff;
      border: none;
      padding: 0.9rem 0.9rem 0.9rem 0.9rem;
      margin: 0.5rem 0;
      width: 70%;
      position: relative;
      left: -7%;
    }
    .input2 {
      background-color: #fff;
      border: none;
      padding: 0.9rem 0.9rem 0.9rem 0.9rem;
      margin: 0.5rem 0;
      width: 40%;
      position: relative;
      left: -7%;
    }
    #captchaImage{
      position: relative;
      top: 25%;
    }
    .s1{
      display: block;
      width: 100%;
    }

    @keyframes show {

      0%,
      49.99% {
        opacity: 0;
        z-index: 1;
      }

      50%,
      100% {
        opacity: 1;
        z-index: 5;
      }
    }
    .headl{
      width: 100%;
      height: 80px;
      background-color: #0367a6;
      position: relative;
      top: -110px;
    }
    .d1{
      float: left;
      position: relative;
      left: 42%;
    }
    .d2{
      float: right;
      height: 100%;
      position: relative;
      top: 43%;
      left: -1%;
    }
    .p1{
      font-size: 28px;
      letter-spacing: 10px;
    }
  </style>
</head>

<body>
<div id="app">

<!--  页头-->
  <div class="headl">
    <div class="d1"><p class="p1">欢迎使用刷题帮</p></div>
    <div class="d2">
      <el-popover
              placement="top-start"
              title="手机app登录"
              width="80"
              trigger="hover"
              >
        <p><img src="http://127.0.0.1/cloud-user/qrcode/mobile" alt=""></p>
        <el-button slot="reference">手机app登录</el-button>
      </el-popover>

      <el-popover
              placement="top-start"
              title="手机扫码登录"
              width="80"
              trigger="hover"
              >
        <img id="clq" src="cloud-user/qrcode/createLoginQrcode" @load="loadFn">
        <button onclick="clq.src='cloud-user/qrcode/createLoginQrcode?' + new Date().getTime()">重新生成</button>
        <el-button slot="reference">手机扫码登录</el-button>
      </el-popover>
    </div>
  </div>

  <div class="container right-panel-active">
    <!-- 注 册 -->
    <div class="container__form container--signup">
      <div action="#" class="form" id="form1">
        <h2 class="form__title">注 册</h2>
        <input type="text" placeholder="用户名" class="input" v-model="userReg.uname" />
        <input type="email" placeholder="邮箱" class="input" v-model="userReg.email" />
        <span class="s1">
        <input type="text" placeholder="验证码" class="input1" v-model="userReg.ecode" />
          <button @click="getemail">发送</button></span>
        <input type="password" placeholder="密码" class="input" v-model="userReg.upwd" />
        <button class="btn" @click="reg">注 册</button>
      </div>
    </div>

    <!-- 登 录 -->
    <div class="container__form container--signin">
      <div action="#" class="form" id="form2">
        <h2 class="form__title">登 录</h2>
        <input type="email" placeholder="用户名" class="input" v-model="userLogin.uname" />
        <input type="password" placeholder="密码" class="input" v-model="userLogin.upwd" />
        <span class="s1">
        <input type="text" placeholder="验证码" class="input2" v-model="userLogin.vcode"/>
          <img @click.prevent="getCode" style="width: 120px; height: 30px;" id="captchaImage" class="captchaImage" :src="imgsrc" title="点击更换验证码" alt="点击更换验证码" title="验证码"></span>
        <a href="getpwd.html" class="link">忘记密码</a>
        <button class="btn" @click="login">登 录</button>
      </div>
    </div>

    <!-- Overlay -->
    <div class="container__overlay">
      <div class="overlay">
        <div class="overlay__panel overlay--left">
          <button class="btn" id="signIn">登 录</button>
        </div>
        <div class="overlay__panel overlay--right">
          <button class="btn" id="signUp">注 册</button>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  let app = new Vue({
    el: "#app",
    data:{
      imgsrc:'',
      ws: null,
      userLogin:{uname:'', upwd:'',vcode:''},
      userReg:{uname:'', email:'', upwd:'',ecode:''},
      em: ''
    },
    created(){
      this.getCode();
    },
    methods:{
      //获取图形验证码
      getCode(){
        axios({
          method: 'get',
          url: 'http://127.0.0.1/cloud-user/vcode/image',
          responseType: 'blob'
        }).then((response) => {
          this.imgsrc = URL.createObjectURL(response.data);
        });
      },
      //获取邮箱验证码
      getemail(){
        axios.get("http://127.0.0.1/cloud-user/vcode/email?email="+this.userReg.email+"&title=注册验证码").then(res=>{
          this.em = this.userReg.email;
          if (res.data.code == 1){
            this.$alert("获取验证码成功");
          }
        });
      },
      //扫码登录二维码生成后运行的方法
      loadFn(){
        //获取token
        axios.get("cloud-user/qrcode/getLoginToken").then(res=>{
          if(res.data.code == 1){
            this.ws = new WebSocket("ws://127.0.0.1:8002/autoLogin/" + res.data.data);
            this.ws.onmessage = (e) =>{
              if (e.data == "OK") {
                axios.get("cloud-user/qrcode/autoLogin?token=" + res.data.data).then(res=>{
                  if(res.data.code == 1){
                    //登录成功
                    this.$message(res.data.msg);
                    //存储
                    sessionStorage.setItem("jwt", res.data.data);
                    //跳转网页
                    location.href = "index.html";
                  }
                });
              }
            }
          }
        });
      },
      //登录
      login(){
        let p = new URLSearchParams();
        p.append('uname', this.userLogin.uname);
        p.append('upwd', this.userLogin.upwd);
        p.append('vcode', this.userLogin.vcode);
        axios.post("cloud-user/login", p).then(res=>{
          if(res.data.code == 1){
            //登录成功
            this.$message(res.data.msg);
            //跳转网页
            if(res.data.data.status == '用户'){
              sessionStorage.setItem("jwt", res.headers.authorization);
              location.href = "index.html";
            }else if(res.data.data.status == '管理员'){
              sessionStorage.setItem("jwt", res.headers.authorization);
              location.href = "../back/index.html";
            }
          }else{
            //登录失败
            this.$alert(res.data.msg);
          }
        });
      },
      //注册
      reg(){
        if(this.em != this.userReg.email){
          this.$alert("请输入原邮箱！");
          return;
        }
        let p = new URLSearchParams();
        p.append('uname', this.userReg.uname);
        p.append('email', this.userReg.email);
        p.append('upwd', this.userReg.upwd);
        p.append('ecode', this.userReg.ecode);
        axios.post("cloud-user/reg", p).then(res=>{
          if(res.data.code == 1){
            //注册成功
            //清空
            this.userReg = {uname:'', email:'', upwd:'',ecode:''};
            this.$message(res.data.msg);
          }else{
            //注册失败
            this.$alert(res.data.msg);
          }
        });
      }
    }
  });
</script>

  <script>
    const signInBtn = document.getElementById("signIn");
    const signUpBtn = document.getElementById("signUp");
    const fistForm = document.getElementById("form1");
    const secondForm = document.getElementById("form2");
    const container = document.querySelector(".container");

    signInBtn.addEventListener("click", () => {
      container.classList.remove("right-panel-active");
    });

    signUpBtn.addEventListener("click", () => {
      container.classList.add("right-panel-active");
    });

    fistForm.addEventListener("submit", (e) => e.preventDefault());
    secondForm.addEventListener("submit", (e) => e.preventDefault());

  </script>
</body>

</html>
